<template>
  <div class="mlt">
    <div class="as">
      <div class="bb">预约诊所:</div>
      <div class="ccc">{{ dataList.mec_name }}</div>
    </div>
    <div class="as">
      <div class="bb">用户姓名:</div>
      <div class="ccc">{{ dataList.cus_name }}</div>
    </div>
    <div class="as">
      <div class="bb">订单费用 :</div>
      <div class="ccc">{{ dataList.ord_amount }}￥</div>
    </div>
    <div class="as">
      <div class="bb">预约医生:</div>
      <div class="ccc">{{ dataList.real_name }}</div>
    </div>

    <div class="as">
      <div class="bb">预约状态:</div>
      <div class="ccc">{{ dataList.ord_status }}</div>
    </div>
    <el-table :data="dataList.item">
      <el-table-column label="商品" prop="goods_name" />
      <el-table-column label="数量" prop="item_qty" />
      <el-table-column label="费用" prop="item_price" />
      <el-table-column label="小计" prop="total_amount" />
    </el-table>
    <div
      style="
        text-align: right;
        margin-right: 10%;
        margin-top: 20px;
        font-size: 14px;
        color: red;
      "
    >
      合计：{{ dataList.ord_amount }}￥
    </div>
    <div>
      <el-button
        v-if="dataList.ord_status_code == 'wait'"
        style="width: 98%; margin-top: 10px; height: 50px; font-size: 20px"
        type="primary"
        @click="go"
      >
        确认订单
      </el-button>
      <el-button
        v-else
        style="width: 98%; margin-top: 10px; height: 50px; font-size: 20px"
        type="primary"
      >
        {{ dataList.ord_status }}
      </el-button>
    </div>
  </div>
</template>

<script>
  // import wx from 'weixin-jsapi'
  // import { wxPay } from '@/api/pay'
  import { payOrder } from '@/api/pay'

  export default {
    props: {},
    data() {
      return {
        getCodeUrl: '',
        dataList: {},
      }
    },
    watch: {},
    mounted() {
      const data = {
        order_sn: this.$route.query.sn,
      }
      payOrder(data).then((e) => {
        this.dataList = e.data.order
      })
    },
    methods: {
      go() {
        const data = {
          order_sn: this.$route.query.sn,
        }
        payOrder(data).then((e) => {
          if (e.status) {
            const url =
              'https://dev.jbkl.com/pay' + '?order_sn=' + this.$route.query.sn
            this.getCodeUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${e.data.app.appid}&redirect_uri=${url}&response_type=code&scope=snsapi_base&state=1#wechat_redirect`
            window.location.href = this.getCodeUrl
          } else {
            // message
            this.$message.error(e.message)
          }
        })
      },
      // wx,
    },
  }
</script>

<style>
  .as {
    width: 100%;
    height: 14.93333333vw;
    line-height: 14.93333333vw;
    border-bottom: 1px solid #d6d6d6;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .bb {
    color: #848484;
    padding-top: 0 !important;
  }
  .ccc {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-left: 2.66666667vw;
    overflow: hidden;
  }
</style>
